var box=document.getElementById("box");
var inputNode=box.getElementsByTagName("input")[0];
var ulNodes=box.getElementsByTagName("ul")[0];
var lis=ulNodes.getElementsByTagName("li");
var spans=ulNodes.getElementsByTagName("span");

function strm(str){
	return str.replace(/(^\s*)|(\s*$)/g, "");
}

inputNode.onkeydown=function(event)
{
	var event=event||window.event;
	var keyCode=event.which||event.keyCode;

	if(keyCode==13||keyCode==32)
	{
		var val=strm(inputNode.value);
		if(val.length>6)
		{
			return alert("字符大于6");
		}
		if(val=="")
		{
			return alert("请输入内容");
		}
		for(var i=0;i<lis.length;i++)
		{
			if(val===lis[i].getElementsByTagName("span")[0].innerHTML)
			{
				return alert("请勿输入相同标签")
			}
		}
        var liNode =document.createElement("li");
        liNode.innerHTML="<span>"+val+"</span><i>x</i>";
        ulNodes.appendChild(liNode,ulNodes);
        inputNode.value="";
	}	
}

ulNodes.onclick=function(event)
{
	var event=event||window.event;
	var tag=event.target||event.srcElement;
	if(tag.nodeName.toLowerCase()==="i")
	{
		var li=tag.parentNode;
		ulNodes.removeChild(li);
	}
}
inputNode.onfocus=function()
{
	inputNode.value="";
}
inputNode.onblur=function()
{
	inputNode.value="添加标签，用空格或回车确认";
}






